<template>
	<view class="content">
		<view class="notice">
			<u-notice-bar mode="horizontal" :list="list" type="none" :color="colors"></u-notice-bar>
		</view>
		<u-empty text="暂无资源" mode="history" v-if="!itemList.length"></u-empty>
		<view class="collapse" v-else>
			<u-collapse>
				<u-collapse-item :title="item.title" v-for="(item, index) in itemList" :key="index"
					@change="btnCollapse()" :index="index">
					<view class="item">
						<view class="rig">
							<text :style="{color: colors}">文件大小：</text>{{item.size | filterType}}
						</view>
						<view class="rig" @click="saveFile(item.filePath)">
							<u-tag text="下载" mode="light" type="success" />
						</view>
						<view class="rig" @click="shardCode(item.filePath)">
							<u-tag text="二维码" mode="light" type="success" />
						</view>
					</view>
					<view class="task">
						<u-line-progress striped :percent="taskprogress" striped-active></u-line-progress>
					</view>
				</u-collapse-item>
			</u-collapse>
		</view>

		<u-popup v-model="showPopup" mode="center" height="600rpx">
			<view style="padding: 40rpx; margin-bottom: 20rpx;">
				<view class=""
					style="text-align: center;color: #F3C301; font-weight: bold;font-size: 35rpx;padding: 10rpx 0;">
					长按保存二维码
				</view>
				<ayQrcode ref="qrcode" qrcode_id="qrcode" :active-color="colors" :modal="modal_qr" :url="url"
					@hideQrcode="hideQrcode" :height="200" :width="200" />
			</view>
		</u-popup>
	</view>
</template>

<script>
	import ayQrcode from "@/components/ay-qrcode/ay-qrcode.vue"
	import * as cloudApi from '@/utils/cloudApi.js'
	export default {
		components: {
			ayQrcode,
		},
		data() {
			return {
				//二维码相关参数
				list: ["暂时只能管理员上传文件，如有书友乐于分享可发送给管理员上传。"],
				modal_qr: false,
				url: '', // 要生成的二维码值
				itemList: [],
				colors: '',
				showPopup: false,
				taskprogress: 0,
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.colors
			})
		},
		onLoad() {
			this.userInfo = uni.getStorageSync("userInfo") || getApp().globalData.userInfo
			this.colors = this.userInfo.themeColors || '#F3C301'
			this.getResouceList()
		},
		filters: {
			filterType: function(val) {
				if (val === 0) return "0KB"
				var k = 1024;
				var sizes = ['B', 'KB', 'MB', 'GB', 'PB', 'TB', 'EB', 'ZB', 'YB'],
					i = Math.floor(Math.log(val) / Math.log(k));
				return (val / Math.pow(k, i)).toPrecision(3) + "" + sizes[i]
			}
		},

		methods: {
			btnCollapse(e) {
				console.log(e);
				this.taskprogress = 0
			},
			shardCode(file) {
				this.url = file
				this.showPopup = true
				let that = this;
				that.showQrcode(); //一加载生成二维码
			},
			saveFile(url) {
				const downloadTask = uni.downloadFile({
					url,
					success: (res) => {
						if (res.statusCode === 200) {
							this.$showToast('下载成功')
						}
					}
				});
				downloadTask.onProgressUpdate((res) => {
					console.log('下载进度' + res.progress);
					this.taskprogress = res.progress
				});
			},
			getResouceList() {
				cloudApi.call({
					name: "resouce",
					data: {
						api: 'getResouceList',
					},
					success: res => {
						console.log(res);
						this.itemList = res.result.data
					}
				})
			},
			btnImg() {
				uni.previewImage({
					// 为当前显示图片的链接/索引值，
					current: 0,
					// 需要预览的图片链接列表
					urls: [this.url],
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},

					}
				})
			},
			// 展示二维码
			showQrcode() {
				let _this = this;
				this.modal_qr = true;
				// uni.showLoading()
				setTimeout(function() {
					// uni.hideLoading()
					_this.$refs.qrcode.crtQrCode()

				}, 100)
			},

			//传入组件的方法
			hideQrcode() {
				this.modal_qr = false;
			},
		}

	}
</script>

<style lang="scss">
	.content {

		.collapse {
			margin: 30rpx;

			.item {
				display: flex;
				text-align: center;
				align-items: center;

				.rig {
					padding: 20rpx;
				}
			}
		}
	}
</style>
